<template>
    <div class="collage flexv">
        <!-- 头部 -->
        <pubHead title="商品详情"></pubHead>

        <!-- 返回首页 -->
        <img class="back_home" @click="toHome" src="@/assets/c_returnhome.png" alt="">

        <!-- 轮播图 -->
        <div class="swipe_box" v-if="goodsInfo.images">
            <van-swipe class="swpier" :loop="true" :autoplay="3000" :show-indicators="false" @change="getIndex">
                <van-swipe-item class="swiper_item" v-for="item in goodsInfo.images" :key="item">
                    <img :src="item" alt="">
                </van-swipe-item>
            </van-swipe>
            <div class="swipe_index white tc">{{sindex}}/{{goodsInfo.images.length}}</div>
        </div>

       <!-- 商品信息 -->
	   <div class="mytitle flex jus-b" v-if="ID">
	   	<div class="title-l">
	   		拼团价:<span style="font-size: 0.46rem;">￥{{goodsInfo.goods_price}}</span>起
	   		<span style="text-decoration: line-through;">￥{{goodsInfo.line_price}}</span>
	   	</div>
	   	<div class="title-r flex ali-c">
	   		<div class="right-l">{{goodsInfo.group_num}}人团</div>
	   		<div>已团{{goodsInfo.sales_actual}}</div>
	   	</div>
	   </div>
        <div class="goods_infos flexv" v-if="ID">
			
            <div class="flex top">
                <p class="title twoline flex1">{{goodsInfo.goods_name}}</p>
                <!-- <img src="@/assets/c_share.png" @click="showShare" class="share_btn" > -->
            </div>

           <!-- <div class="jus-b ali-b prices">
                <div class="ali-b">
                    <span>￥{{goodsInfo.goods_price}}</span>
                </div>
                <span class="sales">已售: {{goodsInfo.sales_actual}}</span>
            </div> -->
        </div>
		<div class="qianggou" v-if="limit_discount_id">
			<div class="qiang-time flex jus-b ali-c">
				<div class="qiang-time-l flex">
					<div class="l-l">限时抢购</div>
					<div class="cut-down ali-c">
						<span>距结束</span>
						<span class="time">{{times.d}}</span>
						<span>天</span>
						<span class="time">{{times.h}}</span>
						<span>:</span>
						<span class="time">{{times.m}}</span>
						<span>:</span>
						<span class="time">{{times.s}}</span>
					</div>
				</div>
				<div class="qiang-time-r">
					<div style="font-size: 0.22rem;color: #fff;">已售{{goodsInfo.sales_actual}}</div>
				</div>
			</div>
			<div class="goods_infos flexv">
			    <div class="flex top">
			        <p class="title twoline flex1">{{goodsInfo.goods_name}}</p>
					<img src="@/assets/c_share.png" @click="showShare" class="share_btn" >
			    </div>
			
			    <div class="jus-b ali-b prices">
			        <div class="ali-b">
			            <span><span style="font-size: 0.3rem;">秒杀价:</span>￥{{goodsInfo.goods_price}}</span>
			            <span class="ali-b seckill_old">原价:<b>{{goodsInfo.line_price}}</b></span>
			        </div>
					<div v-if="goodsInfo.act_first_distribution_price" style="font-size: 0.24rem; color: #EE1C1A;">
						分享赚￥{{goodsInfo.act_first_distribution_price}}
					</div>
			    </div>
			</div>
		</div>
		
		<!-- 拼团规则 -->
		<div class="others jus-b mt2" @click="showGui" v-if="ID!=null">
		    <div class="flex">
		        <span>拼团规则</span>
		        <!-- <span class="text">生产日期 品牌...</span> -->
		    </div>
			<div class="flex ali-b">
				<span style="color: #999;font-size: 0.2rem;margin-right: 0.1rem;">查看详细规则</span>
				<img src="@/assets/c_rightarrow.png" class="to_ico" alt="">
			</div>
		</div>
		<!-- 参数 -->
        <div class="others jus-b mt2" @click="showParams">
            <div class="flex">
                <span>产品说明</span>
                <!-- <span class="text">生产日期 品牌...</span> -->
            </div>
           <img src="@/assets/c_rightarrow.png" class="to_ico" alt="">
        </div>
		<!-- 开团列表 -->
		<div class="otherTuan mt2" v-if="ID && tuanList.length!=0">
			<div class="others jus-b" v-if="ID!=null">
			    <div class="flex">
			        <span>{{group_count}}人正在开团，可直接参团</span>
			        <!-- <span class="text">生产日期 品牌...</span> -->
			    </div>
				<div class="flex ali-b" @click="showAll">
					<span style="color: #999;font-size: 0.2rem;margin-right: 0.1rem;">查看更多</span>
					<img src="@/assets/c_rightarrow.png" class="to_ico" alt="">
				</div>
			</div>
			<div class="item flex jus-b" v-for="(item,index) in tuanList" :key="index">
				<div class="item-l flex ali-c" style="max-width: 3.7rem;">
					<img class="img" :src="item.avatar" />
					<span class="oneline">{{item.name}}</span>
				</div>
				<div class="item-r flex ali-c">
					<div class="item-r-l">
						<p>还差<span style="color: #EE1C1A;">{{item.num}}人</span>拼成</p>
						<p>剩余{{times.h}}:{{times.m}}:{{times.s}}</p>
					</div>
					<div class="item-r-r flex ali-c jus-c" @click="toCan(item)" v-if="!item.is_my">
						去参团
					</div>
					<div class="item-r-r flex ali-c jus-c" @click="showFina" v-else>
						邀请好友
					</div>
				</div>
			</div>
		</div>
		
       <!-- 商品评价 -->
       <div class="evaluates flexv mt2" v-if="comment_count > 0">
           <div class="evaluate_head jus-b">
               <div class="left">精选点评（{{comment_count}}条）</div>
       
               <div class="right ali-c" @click="toEvaluate">
                   <span>查看全部</span>
               </div>
           </div>
       
           <!-- 评价 -->
           <div class="evaluate flexv" v-for="(item1,index1) in comment" :key="index1">
               <div class="top ali-c">
                   <img :src="item1.user_head" class="user_img" alt="">
                   <div class="rights flexv">
                       <p class="user_name">{{item1.user_name}}</p>
                       <div class="ali-b">
                           <p class="spec">{{getDate('yyyy-mm-dd',item1.add_time)}}</p>
                           <div class="star_box flex">
                               <img  src="@/assets/icon_up.png" v-for="item in item1.star_num" :key="item" alt="">
                           </div>
                       </div>
                   </div>
               </div>
               <!-- 评价内容 -->
               <div class="evaluate_text mt2">{{item1.content}}</div>
               <!-- 评价图片 -->
               <div class="evaluate_imgs mt2 flex-wrap" >
                   <img :src="item2" @click="getImg(item1.images,index2)" class="img" alt="" v-for="(item2,index2) in item1.images" :key="index2">
               </div>
           </div>
       </div>
        <!-- 商品详情 -->
        <div class="articles flexv" >
            <div class="heads tc">商品详情</div>

            <div class="article" ></div>
            <div class="article" v-html="goodsInfo.content"></div>
        </div>
		
        <!-- 底部栏 -->
        <div class="footer_box">
            <div class="foot_items flex">
                <div class="flex1 flexv item" @click="toHome">
                    <img src="@/assets/c_home.png" alt="">
                    <p class="tc">首页</p>
                </div>
                <div class="flex1 flexv item" @click="soucang">
                    <img src="@/assets/c_collection_n.png" v-if="is_collect == 0" alt="">
                    <img src="@/assets/c_collection_s.png" v-else alt="">
                    <p class="tc" v-if="is_collect == false">收藏</p>
                    <p class="tc" v-else>已收藏</p>
                </div>
                <div class="flex1 flexv item" @click="toCart">
                    <img src="@/assets/c_shoppingcart.png" alt="">
                    <p class="tc">购物车</p>
                    <i class="point white tc" v-if="cartNumber > 0">{{cartNumber}}</i>
                </div>
                <div class="right_btn flex">
					<div v-if="ID && KaiType==0" class="add_cart white flex1 tc" @click="buyBtn(3)">单独购买</div>
                    <div v-if="ID && KaiType==0" class="buy_now white flex1 tc" @click="toPay">立即支付</div>
					<div v-if="ID && KaiType==1" class="add_cart white flex1 tc">正在开团</div>
					<div v-if="ID && KaiType==1" class="buy_now white flex1 tc" @click="showFina">邀请好友</div>
					<div v-if="ID && KaiType==2" class="add_cart white flex1 tc" @click="buyBtn(3)">单独购买</div>
					<div v-if="ID && KaiType==2" class="buy_now white flex1 tc" @click="buyBtn(2)">一键开团</div>
					<div v-if="ID && KaiType==3" class="add_cart white flex1 tc" @click="buyBtn(3)">单独购买</div>
					<div v-if="ID && KaiType==3" class="buy_now white flex1 tc" @click="buyBtn(2)">一键开团</div>
					<div v-if="ID && KaiType==10" class="add_cart white flex1 tc" @click="buyBtn(3)">单独购买</div>
					<div v-if="ID && KaiType==10" class="buy_now white flex1 tc" @click="buyBtn(2)">一键开团</div>
					<!-- <div v-if="limit_discount_id" class="add_cart white flex1 tc" @click="buyBtn(1)">加入购物车</div> -->
					<div v-if="limit_discount_id" class="buy_now white flex1 tc" @click="buyBtn(2)">立即购买</div>
				</div>
            </div>
        </div>

        <!-- 分享弹窗 -->
        <van-popup class="share_popup flex" position="bottom" v-model="share">
            <div class="share_box jus-a ali-c">
                <div class="share_item flexv" @click="showFina">
                    <img src="@/assets/wechat.png" alt="">
                    <p class="tc">微信好友</p>
                </div>
                <div class="share_item flexv" @click="showPost">
                    <img src="@/assets/photo.png" alt="">
                    <p class="tc">生成海报</p>
                </div>
            </div>
        </van-popup>
        <!-- 参数弹窗 -->
        <van-popup v-model="showParam" :close-on-click-overlay="false" position="bottom" class="c_popup flex">
            <div class="c_box flexv">
                <div class="top tc">
                    产品说明
                    <img src="@/assets/c_close_icon.png" @click="close" class="cancel" alt="">
                </div>

                <div class="param_lists flex1 flexv" v-if="param && param.length > 0">
                    <div class="parama flex" v-for="item in param" :key="item.title">
                        <p class="oneline">{{item.title}}</p>
                        <p class="notes flex1 oneline">{{item.value}}</p>
                    </div>
                </div>

                <div class="empty_attr tc" v-else>
                    暂无说明
                </div>


                <div class="close_btn flex">
                    <div class="btn tc white" @click="close">确定</div>
                </div>
            </div>
        </van-popup>
		<!-- 拼团规则 -->
		<van-popup v-model="guize" round closeable>
			<div class="guize">
				<div class="guize-title">
					拼团规则
				</div>
				<div v-html="goodsInfo.rule">
				</div>
			</div>
		</van-popup>
        <!-- 规格弹窗 -->
        <van-popup v-model="showSpec" :close-on-click-overlay="false" position="bottom" class="c_popup flex">
            <div class="c_box flexv">
                <!-- 商品信息 -->
                <div class="goods_info flex" v-if="goodsInfo.images">
                    <img :src="goodsImg" class="goods_img" alt="">

                    <div class="infos flex1 flexv jus-b">
                        <p class="title oneline">{{goodsName}}</p>
                        <p v-if="buyType==3" class="price">¥{{linePrice}}</p>
						<p v-else class="price">¥{{goodsPrice}}</p>
                        <p class="stock">库存: {{stock_num}}</p>
                    </div>

                    <img src="@/assets/c_close_icon.png" @click="close" class="cancel" alt="">
                </div>

                <!-- 规格 -->
				<div style="max-height: 6rem;overflow-y: scroll;">
                <div class="speces flexv" v-for="(item,index) in spec_list" :key="index">
                    <div class="spec_title">{{item.spec_name}}</div>

                    <div class="sepc_lists flex-wrap" >
                        <div class="spec" :class="{'on': speclist[index].id==spec.id}" v-for="(spec,ind) in item.sub" :key="ind" @click="chooseThis(spec.id,index)" :data-id="spec.id" >{{spec.spec_value}}</div>
                    </div>
                </div>
				</div>
                <!-- 数量 -->
                <div class="buy_nums jus-b ali-c">
                    <span>购买数量:</span>

                    <div class="nums_box flex">
                        <div class="cut tc" @click="cutNum">-</div>
                        <div class="num tc flex1">{{buyNum}}</div>
                        <div class="add tc" @click="addNum">+</div>
                    </div>
                </div>
                <!-- 购买按钮 -->
                <div class="buy_btn white tc" @click="toBuy">确定</div>
            </div>
        </van-popup>
		<!-- 全部的正在开团 -->
		<van-popup class="allKai" v-model="allKai" closeable>
			<div class="allKai-t">
				正在开团
			</div>
			<div class="allKai-list mt2" v-for="(item,index) in group_more" :key="index">
				<div class="item flex jus-b ali-c">
					<div class="item-l flex">
						<img class="img" :src="item.avatar" />
						<div>
							<p><span style="font-size: 0.28rem;">{{item.name}}</span><span style="font-size: 0.24rem;">还差<span style="color: #EE1C1A;">{{item.num}}人</span></span></p>
							<p style="color: #666;font-size: 0.22rem;">剩余{{times_1[index]}}</p>
						</div>
					</div>
					<div class="item-r flex ali-c jus-c" @click="showFina" v-if="item.is_my">
						邀请好友
					</div>
					<div class="item-r flex ali-c jus-c" @click="toCan(item)" v-else>
						去参团
					</div>
				</div>
			</div>
		 </van-popup>
        <!-- 最终分享弹窗 -->
        <van-popup v-model="final" class="flex finally_share_box">
            <div class="finally_share flex1 flexv">
                <div class="flex img_box">
                    <img src="@/assets/wecheat-share.png" alt="" class="fill">
                </div>
                <p class="click white tc" @click="cancel">我知道了</p>
            </div>
        </van-popup>
		<van-popup v-model="showPin" closeable class="showPin">
		    <p style="font-size: 0.32rem;color: #000;" v-if="allInfo.list">参与{{allInfo.list[0].name}}的拼团</p>
		    <p style="font-size: 0.28rem;margin-top: 0.3rem;">还差<span style="color: #EE1C1A;margin-right: 0.2rem;">{{allInfo.num}}人</span><span style="color: #666;">剩余{{times.h}}:{{times.m}}:{{times.s}}</span></p>
			<div class="showPin-imgs">
				<img class="img" v-for="(item,index) in allInfo.list" :key="index" :src="item.avatar" />
			</div>
			<div class="show-btn" @click="buyBtn(2)">参与拼团</div>
		</van-popup>
         <!--分享海报-->
        <van-popup v-model="shareBox" class="shareBox" id="shareBox">
<!--        <van-popup v-model="shareBox" class="shareBox" id="shareBox" @click-overlay="closeShareBox"> -->
            <img :src="shareSRC" alt="">
        </van-popup>
        <section class="canvas_share flexv" id="canvas-share" ref="canvasShare" v-if="!shareSRC">
            <div class="share_banner flexv">
                <img :src="shareBannerSRC" alt="" class="fill" >
                <p>{{goodsInfo.goods_name}}</p>
            </div>
			
            <div class="share_code jus-b">
				
                <div class="share_left flexv jus-a flex1">
                    <div class="share_left_top ali-c">
                        <img id="a" :src="avatar" class="share_user">
                        <p class="name flex1">{{nickname}}</p>
                    </div>

                    <div class="share_left_bottom ali-c">
                        <span class="ico white tc">抢购价</span>
                        <span class="price white tc">￥{{goodsInfo.goods_price}}</span>
                    </div>
					<div class="logo-area flex ali-b">
					    <div class="logo-img">
							<img src="@/assets/logo2.png" />
						</div>
					    <span class="logo-name">马帮GO</span>
					</div>
                </div>

                <div class="share_right flexv">
                    <img :src="codeSRC" alt="" id="b" class="code">

                    <p class="note tc white">·长按立即购买·</p>
                </div>
                
            </div>
        </section>
    </div>
</template>

<script>
import Vue from 'vue';
import pubHead from '@/components/head';
import html2canvas from 'html2canvas';
import wx from 'we-jssdk'; // 导入jssdk
import { Toast, Swipe, SwipeItem, Popup, Dialog,ImagePreview  } from 'vant';
import { wxConfigApi,getItemDetail,collectedit,addIncart,getItemSku,CartNum,getLimitDiscountDetail,getJoinGroupbuyList,groupbuying} from '@/request/api';
import {
		seckill_2,timestampToDate
	} from '@/config/utils.js';
Vue.use(Toast,Swipe, SwipeItem, Popup)
    export default {
        data() {
            return {
				goodId:null,
				ID:null,
                isNone: false, // 是否为空
                type: false, // 是否管理状态
                sindex: 1, // 轮播图下标
                showKnow: false, // 预订须知
                share: false, // 分享弹窗
                showParam: false, // 参数弹窗
                showSpec: false, // 规格弹窗
                buyNum: 1, // 购买数量
                selectSpecInfo: '', // 选中的规格信息
                spec_list: [], // 规格列表
                specId: [], // 选择的完整规格id
                goodsInfo: '', // 商品信息
                buyType: 0, // 1 加入购物车 2 立即购买
                cartNumber: 0,
                // 分享相关
                sahreInfos: '', // 分享信息
                final: false, // 是否分享到微信
                shareBox: false, // 分享弹窗
                shareSRC: null, // canvas生成的最终分海报图片
                shareLoading: false,
                shareBannerSRC: null, // 分享的海报图片
                codeSRC: null, // 分享的二维码
				curentIndex:0,
				curentId:0,
				comment_count: '',
				comment: '',
				is_collect: 0,
				param: [],
				father: '',
				speclist: [],
				goodsId:null,
				goods_spec_id:'',
				sku_id:'',
				spec_type:'',
				good_spec_id:'',
				sku_name:'',
				goodsImg:'',
				goodsName:'',
				goodsPrice:'',
				linePrice:'',
				stock_num:0,
				avatar: '', // 用户头像
				nickname: '', // 用户昵称
				shareImg:null,//分享的图片
				shareUrl:'',
				limit_discount_id:null,
				guize:false,//展示拼团规则
				allKai:false,//展示正在开团的列表
				times: '',
				times_1: [],
				timmer: '', // 倒计时
				timmer_1:'',
				times_2: [],
				timmer_2:'',
				tuanList:'',//参团列表
				group_count:0,
				group_buyid:'',
				group_more:[],
				showPin:false,
				allInfo:'',//点击去参团
				group_id:'',
				activity_id:'',
				KaiType:10,
				order_no:'',
				total_price:''
				
            }
        },
		beforeRouteEnter (to, from, next) {
		   //在next中写处理函数
					if(from.name=='CollageIn'){
						next(vm => vm.buyBtn(2))
					}else{
						next()
					}
					
		},
        created() {
			if(this.$route.query.limit_discount_id)
			{
				this.limit_discount_id = this.$route.query.limit_discount_id
				this.goodId = this.$route.query.goods_id
				console.log(this.limit_discount_id)
				this.getData_1();
				this.getCarNum();
			}
			if(this.$route.query.groupbuy_id)
			{
				this.ID = this.$route.query.id
				this.goodId = this.$route.query.goods_id
				this.getData();
				this.getCarNum();
				console.log(this.ID)
				
			}
			if(this.$route.query.group_id){
				this.group_id = this.$route.query.group_id
			}
        },
        components: {
            pubHead,
            "van-swipe": Swipe,
            "van-swipe-item": SwipeItem,
            "van-popup": Popup,
        },
        methods: {
			getImg(images,index){
			      ImagePreview({
			          images:images,
			          showIndex:true,
			          loop:false,
			          startPosition:index
			 })
			 },
            // 获取数据
            getData(){
				let that = this
				that.$loading()
				getItemDetail({
					id:that.ID,
					goods_id:that.goodId,
					token:localStorage.getItem('token')
				}).then(res=>{
					Toast.clear()
					if(res.code==1){
						sessionStorage.removeItem('goods_id')
						sessionStorage.removeItem('goods_type')
						sessionStorage.removeItem('group_id')
						sessionStorage.removeItem('actType')
						that.goodsInfo = res.data.goods;
						if(res.data.type){
							that.KaiType = res.data.type
							
						}
						if(res.data.type==0){
							that.KaiType = res.data.type
							that.order_no = res.data.order_no
							that.total_price = res.data.pay_price
						}
						that.goodsImg = that.goodsInfo.images[0]
						that.goodsName = that.goodsInfo.goods_name
						that.goodsPrice = that.goodsInfo.goods_price
						that.linePrice = that.goodsInfo.line_price
						that.stock_num = that.goodsInfo.item_sku[0].stock_num
						that.is_collect = res.data.is_collect
						that.activity_id = that.goodsInfo.activity_id
						console.log(that.activity_id)
						that.tuanList = res.data.group_list
						if(that.tuanList.length!=0){
							that.cutDown(res.data.group_list[0].time)
							console.log(res.data.group_list[0].time)
						}
						
						that.group_count = res.data.group_count
						that.comment = res.data.comment
						that.comment_count = res.data.comment_count
						that.param = res.data.param
						that.goodsId = res.data.goods.goods_id
						that.spec_type = res.data.goods.spec_type
						that.spec_list = res.data.goods.item_sku;
						that.avatar = res.data.user.avatar;
						that.nickname = res.data.user.nickname;
						that.shareBannerSRC = res.data.goods.share_image;
						that.codeSRC = res.data.logo_image;
						that.shareImg = res.data.goods.share_image;
						that.shareUrl = res.data.url;
						if(!that.group_id)
						{
							that.group_id = res.data.group_id;
						}
						if(res.data.goods.spec_type==10)
						{
							that.good_spec_id = res.data.goods.item_sku[0].goods_spec_id
							console.log(that.good_spec_id)
							console.log(11111)
						}else{
							res.data.goods.item_sku.forEach((item) =>{
								if(item.sub){
									this.speclist.push(item.sub[0])
								}
							})
							that.sku_id = this.speclist[0].id
							that.sku_name = this.speclist[0].spec_value
							
							getItemSku({
								goods_id:this.goodsId,
								sku_id:that.sku_id
							}).then(res=>{
								if(res.code==1){
									that.good_spec_id = res.data.goods_spec_id
									that.stock_num = res.data.stock_num
								}
							})
						}
					that.getSignPackage_1();
					}else{
						that.$tip(res.msg)
					}
				})
            },
			// 获取数据
			getData_1(){
				let that = this
				that.$loading()
				getItemDetail({
					id:that.limit_discount_id,
					goods_id:that.goodId,
					token:localStorage.getItem('token')
				}).then(res=>{
					Toast.clear()
					if(res.code==1){
						sessionStorage.removeItem('goods_id')
						sessionStorage.removeItem('goods_type')
						sessionStorage.removeItem('actType')
						that.goodsInfo = res.data.goods;
						this.cutDown(that.goodsInfo.miao)
						that.goodsImg = that.goodsInfo.images[0]
						that.goodsName = that.goodsInfo.goods_name
						that.goodsPrice = that.goodsInfo.goods_price
						that.linePrice = that.goodsInfo.line_price
						that.stock_num = that.goodsInfo.item_sku[0].stock_num
						that.is_collect = res.data.is_collect
						that.comment = res.data.comment
						that.comment_count = res.data.comment_count
						that.param = res.data.param
						that.goodsId = res.data.goods.goods_id
						that.spec_type = res.data.goods.spec_type
						that.spec_list = res.data.goods.item_sku;
						that.avatar = res.data.user.avatar;
						that.nickname = res.data.user.nickname;
						that.shareBannerSRC = res.data.goods.share_image;
						that.codeSRC = res.data.logo_image;
						that.shareImg = res.data.goods.share_image;
						that.shareUrl = res.data.url;
						that.activity_id = that.goodsInfo.activity_id
						console.log(that.activity_id)
						if(res.data.goods.spec_type==10)
						{
							that.good_spec_id = res.data.goods.item_sku[0].goods_spec_id
							console.log(that.good_spec_id)
							console.log(11111)
						}else{
							res.data.goods.item_sku.forEach((item) =>{
								if(item.sub){
									this.speclist.push(item.sub[0])
								}
							})
							that.sku_id = this.speclist[0].id
							that.sku_name = this.speclist[0].spec_value
							
							getItemSku({
								goods_id:this.goodsId,
								sku_id:that.sku_id
							}).then(res=>{
								if(res.code==1){
									that.good_spec_id = res.data.goods_spec_id
									that.stock_num = res.data.stock_num
								}
							})
						}
					that.getSignPackage();
					}else{
						that.$tip(res.msg)
					}
				})
			},
			getCarNum(){
				CartNum({
					token:localStorage.getItem('token')
				}).then(res=>{
					if(res.code==1)
					{
						this.cartNumber = res.data.cartNum
					}
				})
			},
			toPay(){
				let that = this
			    let data= {
			        order_no: that.order_no,
			        pay_money: that.total_price
			    }
			    this.$router.push('/orderPay?info='+JSON.stringify(data))
			},
			//开团列表的查看更多
			getTuanMore(){
				getJoinGroupbuyList({
					goods_id:this.goodId,
					activity_id:this.activity_id,
					token:localStorage.getItem('token')
				}).then(res=>{
					if(res.code==1)
					{
						this.group_more = res.data
						this.group_more.map((item,index)=>{
							this.cutDown_1(item.time,index)
						})
					}
				})
			},
			// 倒计时
			seckill_1(now,rest){
			    // let days = formatNumber(parseInt(rest / 60 / 60 / 24)),
			    //   hours = formatNumber(parseInt(rest / 60 / 60 % 24)),
			    //   minutes = formatNumber(parseInt(rest / 60 % 60)),
			    //   seconds = formatNumber(parseInt(rest % 60));
				let nowTime = new Date(now*1000);
				let endTime = new Date(rest*1000);
				let t = endTime.getTime() - nowTime.getTime();
				let days = Math.floor(t/1000/60/60/24);
				let hours = Math.floor(t/1000/60/60%24);
				let minutes = Math.floor(t/1000/60%60);
				let seconds = Math.floor(t/1000%60);
				if(days < 10){
					days = '0' + days;
				}
				if(hours < 10){
					hours = '0' + hours;
				}
				if(minutes < 10){
					minutes = '0' + minutes;
				}
				if(seconds < 10){
					seconds = '0' + seconds;
				}
			    return { d: days, h: hours, m: minutes, s: seconds }
			  },
			cutDown(time) {
					this.timmer = setInterval(() => {
						if (time >= 0) {
							this.times = seckill_2(time);
							time=time-1;
						} else {
							clearInterval(this.timmer);
						}
					}, 1000)
			},
			cutDown_2(time,index) {
					this.timmer_2 = setInterval(() => {
						if (time >= 0) {
							this.times_2[index] = timestampToDate(time);
							time=time-1;
						} else {
							clearInterval(this.timmer_2);
						}
					}, 1000)
			},
			cutDown_1(time,index) {
					this.timmer_1 = setInterval(() => {
						if (time >= 0) {
							this.times_1[index] = timestampToDate(time);
							time=time-1;
						} else {
							clearInterval(this.timmer_1);
						}
					}, 1000)
			},
            // 获取轮播图当前位置
            getIndex(info){
                this.sindex = info + 1
            },
			//转换年月日方法
			getDate(format, str) {
				let oTime = null;
				let newStr = str * 1000;
				var oDate = new Date(newStr),
					oYear = oDate.getFullYear(),
					oMonth = oDate.getMonth() + 1,
					oDay = oDate.getDate(),
					oHour = oDate.getHours(),
					oMin = oDate.getMinutes(),
					oSec = oDate.getSeconds()
				if (format == 'yyyy-mm-dd') {
					oTime = oYear + '-' + this.getzf(oMonth) + '-' + this.getzf(oDay)
				} else if (format == 'yyyy/mm/dd') {
					oTime = oYear + '/' + this.getzf(oMonth) + '/' + this.getzf(oDay)
				}
				return oTime;
			},
			//补0操作  
			getzf(num) {
				if (parseInt(num) < 10) {
					num = '0' + num;
				}
				return num;
			},
			chooseThis(id,father){
				let that = this
				this.spec_list.forEach((item,index) =>{
					if(father == index){
						item.sub.forEach((spec) =>{
							if(id == spec.id){
								this.speclist.splice(father,1,spec)
							}
						})
					}
				})
				
				// console.log(this.speclist[0].id,this.speclist[1].id)
				// let sku_id = this.speclist[0].id+'_'+this.speclist[1].id
				
				that.sku_name = this.speclist[father].spec_value
				if(this.spec_type==10){
					that.sku_id = this.speclist[father].id
				}else{
					that.sku_id = this.speclist[0].id
				}
				
				getItemSku({
					goods_id:this.goodsId,
					sku_id:that.sku_id
				}).then(res=>{
					if(res.code==1){
						that.good_spec_id = res.data.goods_spec_id
						that.goodsImg = res.data.spec_image
						that.goodsPrice = res.data.goods_price
						that.linePrice = res.data.line_price
						that.stock_num = res.data.stock_num
						console.log(res)
					}else{
						
					}
				})
			},
            // 返回首页
            toHome(){
                this.$router.replace('/')
            },
			toCan(item){
				// let item_1 = JSON.stringify(item)
				// this.$router.push('/collageIn?item='+item_1+'&id='+this.goodId)
				groupbuying({
					id:item.id,
					goods_id:this.goodId,
					token:localStorage.getItem('token')
				}).then(res=>{
					Toast.clear()
					if(res.code==1){
						this.allInfo = res.data
						this.showPin = true
						this.group_id = res.data.group_id
					}
				})
			},
            // 展示预订须知
            showNote(){
                this.showKnow = true;
            },
			showGui(){
				this.guize = true
			},
			showAll(){
				this.allKai = true
				this.getTuanMore()
			},
            // 关闭预订须知
            closeKnow(){
                this.showKnow = false;
            },
            // 展示分享弹窗
            showShare(){
                this.share = true;
            },
            // 展示参数弹窗
            showParams(){
                this.showParam = true;
            },
            // 查看全部评价
            toEvaluate(){
                let data = {
                	id:0,
                	type:this.goodsId
                }
                this.$router.push({name:"Evaluates",query:data})
            },
            // 进入购物车
            toCart(){
                this.$router.replace('/car');
            },
            // 购买按钮
            buyBtn(type){
				this.allKai = false
				this.showPin = false
                this.buyType = type;
                // this.getSpeces();
                this.showSpec = true;
            },
            // 关闭弹窗
            close(){
                this.showSpec = false;
                this.showParam = false;
            },
            // 减
            cutNum(){
                if(this.buyNum > 1){
                    this.buyNum--
                }else{
                    this.$tip('不能再减了哦T_T');
                }
            },
            // 加
            addNum(){
                this.buyNum ++
            },
            // 去购买
            toBuy(){
                if(!this.specId && this.goodsInfo.spec_type == 20){
                    this.$tip('请选择规格!');
                    return
                }

                this.showSpec = false;
                // 加入购物车
				let that = this
                if(this.buyType == 1){
                    this.$loading();
					if(that.spec_type==20)
					{
						getItemSku({
							goods_id:this.goodsId,
							sku_id:this.sku_id
						}).then(res=>{
							if(res.code==1){
								console.log(111)
								console.log(res.data.goods_spec_id)
								that.good_spec_id = res.data.goods_spec_id
								addIncart({
								    goods_id: this.goodsId,
								    goods_spec_id: that.good_spec_id,
								    num: this.buyNum,
								    token: localStorage.getItem('token') ? localStorage.getItem('token') : '',
									type:1
								}).then(res =>{
								    Toast.clear();
								    if(res.code == 1){
								        // this.getNums();
								        this.$tip('加入购物车成功!');
										this.getCarNum()
								    }
									else{
										this.$tip(res.msg);
									}
								})
								
							}
						})
					}else{
						addIncart({
						    goods_id: this.goodsId,
						    goods_spec_id: that.good_spec_id,
						    num: this.buyNum,
						    token: localStorage.getItem('token') ? localStorage.getItem('token') : '',
							type:1
						}).then(res =>{
						    Toast.clear();
						    if(res.code == 1){
						        // this.getNums();
						        this.$tip('加入购物车成功!');
								this.getCarNum()
						    }
							else{
								this.$tip(res.msg);
							}
						})
						
					}
					
                    
                }else if(this.buyType == 2){
                    // 立即购买
					let arr = []
					let arr_1 = []
                    let data = {
						// 抢购
						goods_img:this.goodsImg,
                        goods_id: this.goodsId,
                        goods_num: this.buyNum,
                        goods_price: this.goodsPrice,
                        option_id: this.good_spec_id,
						goods_name:this.goodsInfo.goods_name,
						goods_type:this.sku_name,
						activity_id:this.activity_id,
						limit_ID:100
                    }
					
					let data_1 = {
						// 拼团
						goods_img:this.goodsImg,
						goods_id: this.goodsId,
						goods_num: this.buyNum,
						goods_price: this.goodsPrice,
						option_id: this.good_spec_id,
						goods_name:this.goodsInfo.goods_name,
						goods_type:this.sku_name,
						group_id:this.group_id,
						activity_id:this.activity_id
					}
					if(this.limit_discount_id){
						// this.$router.push('/confirmOrder?goods='+JSON.stringify(arr))
						this.$router.push({name:'CollagePlace',query:data})
						// this.$router.push('/placeholder/'+encodeURIComponent(arr))
					}else{
						this.$router.push({name:'CollagePlace',query:data_1})
					}
                    
                }else if(this.buyType == 3){
					let arr = []
					let data = {
						goods_img:this.goodsImg,
					    goods_id: this.goodsId,
					    goods_num: this.buyNum,
					    goods_price: this.linePrice,
					    option_id: this.good_spec_id,
						goods_name:this.goodsInfo.goods_name,
						goods_type:this.sku_name
					}
					arr.push(data)
					// this.$router.push('/confirmOrder?goods='+JSON.stringify(arr))
					this.$router.push({name:'Placeholder',query:data})
					// this.$router.push('/placeholder/'+encodeURIComponent(arr))
				}
            },
            // 展示分享到微信
            showFina(){
				this.allKai = false;
                this.share = false;
                this.final = true;
            },
            // 关闭提示
            cancel(){
                this.final = false;
            },
            // 关闭分享弹出回调
            closeShareBox() {
                // this.shareSRC = '';
            },
			showPost(){
				this.share = false;
				
				if(this.shareSRC!=null)
				{
					this.shareBox = true;
				}else{
					this.shareBanner('click')
				}
			},
           shareBanner(type) {
               this.share = false;
           	if (type == "click") {
           		this.$loading("加载中...");
           	}
           
               // 正常进入
               var opts = {
           		backgroundColor: null,
           		timeout: 50, // 加载延时
                   useCORS:true
               };
           	
           	
           	let that = this
               const timmer = setTimeout(() =>{
           		// if(a.complete && b.complete) {
           			html2canvas(document.getElementById('canvas-share'),opts).then((canvas) => {
           				that.shareSRC = canvas.toDataURL("image/png");
           				that.shareBannerSRC = null;
           				clearInterval(timmer);
           				that.shareBox = true;
           				if (type == "click") {
           					Toast.clear();
           				}
           				
           			});
           		// }
               }, 0)
           },
            // 获取分享信息
            getShare(){
                shareInfo({
                    token: localStorage.getItem('token'),
                    id: this.$route.query.id,
                    item_type: this.$route.query.type,
                }).then(res =>{
                    if(res.code == 1){
                        this.sahreInfos = res.data;
                        this.codeSRC = res.data.logo_image;
                        this.shareBannerSRC = res.data.item.images[0];
                    }
                })
            },
			soucang(){
				let that = this
				this.is_collect = !(this.is_collect)
				collectedit({
					token: localStorage.getItem('token'),
					item_type:"0",
					id:that.goodsInfo.goods_id
				}).then(res=>{
					if(res.code==1){
						that.$tip(res.msg)
					}else{
						that.$tip(res.msg)
					}
					
				})
			},
            // 获取微信签名
            getSignPackage(){
                let that = this;
                wxConfigApi({
                    url: location.href.split('#')[0]
                }).then(res =>{
                    if(res.code == 1){
                        // 返回的签名信息
                        const signPackage = res.data.sign;
                        const url = that.shareUrl;
                        const title = that.goodsInfo.goods_name, img = that.shareImg

                        wx.config({
                            debug: false, // 开启调试模式
                            appId: signPackage.appId, // 必填，公众号的唯一标识
                            timestamp: signPackage.timestamp, // 必填，生成签名的时间戳
                            nonceStr: signPackage.nonceStr, // 必填，生成签名的随机串
                            signature: signPackage.signature, // 必填，签名，见附录1
                            jsApiList: [
                                'onMenuShareTimeline',// 获取“分享到朋友圈”按钮点击状态及自定义分享内容接口
                                'onMenuShareAppMessage'//分享好友
                            ] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
                        });
                        wx.ready(() => {
                            // 分享给朋友
                            wx.onMenuShareAppMessage({
                                title: title, // 分享标题
                                link: url, // 分享链接
                                desc: title, // 副标题
                                imgUrl: img, // 分享图标
                                success () {
                                    // 用户成功分享后执行的回调函数
                                    // Toast('分享成功')
                                },
                                cancel () {
                                    // 用户取消分享后执行的回调函数
                                }
                            });
                            // 分享到朋友圈
                            wx.onMenuShareTimeline({
                                title: title, // 分享标题
                                link: url, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
                                imgUrl: img, // 分享图标
                                success() {
                                },
                                cancel() {
                                }
                            });
                        });
                        wx.error(function(res){
                        });
                    }
                })
            },
			// 获取微信签名拼团
			getSignPackage_1(){
			    let that = this;
			    wxConfigApi({
			        url: location.href.split('#')[0]
			    }).then(res =>{
			        if(res.code == 1){
			            // 返回的签名信息
			            const signPackage = res.data.sign;
			            const url = "http://mbgo.0791jr.com?goods_id="+that.goodId+"&id="+that.ID+"&group_id="+that.group_id;
			            const title = that.goodsInfo.goods_name, img = that.shareImg
			
			            wx.config({
			                debug: false, // 开启调试模式
			                appId: signPackage.appId, // 必填，公众号的唯一标识
			                timestamp: signPackage.timestamp, // 必填，生成签名的时间戳
			                nonceStr: signPackage.nonceStr, // 必填，生成签名的随机串
			                signature: signPackage.signature, // 必填，签名，见附录1
			                jsApiList: [
			                    'onMenuShareTimeline',// 获取“分享到朋友圈”按钮点击状态及自定义分享内容接口
			                    'onMenuShareAppMessage'//分享好友
			                ] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
			            });
			            wx.ready(() => {
			                // 分享给朋友
			                wx.onMenuShareAppMessage({
			                    title: title, // 分享标题
			                    link: url, // 分享链接
			                    desc: title, // 副标题
			                    imgUrl: img, // 分享图标
			                    success () {
			                        // 用户成功分享后执行的回调函数
			                        // Toast('分享成功')
			                    },
			                    cancel () {
			                        // 用户取消分享后执行的回调函数
			                    }
			                });
			                // 分享到朋友圈
			                wx.onMenuShareTimeline({
			                    title: title, // 分享标题
			                    link: url, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
			                    imgUrl: img, // 分享图标
			                    success() {
			                    },
			                    cancel() {
			                    }
			                });
			            });
			            wx.error(function(res){
			            });
			        }
			    })
			},
			beforeRouteLeave(to, from, next) {
				clearInterval(this.timmer);
				clearInterval(this.timmer_1);
				next()
			},
        }
    }
</script>

<style lang="less" scoped>
.collage{
    min-height: 100vh;
    background-color: #f5f5f5;
	.showPin{
		background-color: #fff;
		width: 6.5rem;
		border-radius: 0.1rem;
		padding: 0.6rem;
		text-align: center;
		.showPin-imgs{
			margin-top: 0.3rem;
				img{
					width: 0.8rem;
					height: 0.8rem;
					border-radius: 100%;
					margin-right: 0.2rem;
				}
		}
		.show-btn{
			margin-top: 0.3rem;
			width: 5.2rem;
			height: 0.8rem;
			background-color: #50AD22;
			color: #fff;
			font-size: 0.3rem;
			text-align: center;
			line-height: 0.8rem;
			border-radius: 0.4rem;
		}
	}
	.mytitle{
		padding: 0.2rem 0.2rem;
		color: #fff;
		background:linear-gradient(0deg,rgba(101,197,50,1) 0%,rgba(80,173,34,1) 100%);
		.title-l{
			
		}
		.title-r{
			.right-l{
				padding: 0 0.1rem;
				background:rgba(254,248,246,0.2);
				// opacity:0.2;
				border-radius:0.21rem;
				font-size: 0.24rem;
				color: #fff;
			}
		}
	}
	.qianggou{
		.qiang-time{
			color: #fff;
			padding: 0.3rem 0.2rem;
			background:linear-gradient(0deg,rgba(101,197,50,1) 0%,rgba(80,173,34,1) 100%);
			.qiang-time-l{
				.l-l{
					font-size: 0.34rem;
					padding-right: 0.1rem;
					border-right: 0.01rem solid #fff;
				}
				.cut-down {
					margin-left: 0.24rem;
					font-size: 0.24rem;
					line-height: 120%;
					color: #fff;
				
					.time {
						margin: 0 0.06rem;
						padding: 0.04rem;
						border-radius: 0.04rem;
						font-size: 0.22rem;
						color: #EE1C1A;
						background-color: #fff;
					}
				}
			}
		}
	}
	.allKai{
		border-radius: 0.1rem;
		padding: 0 0.2rem 0.3rem 0.2rem;
		width: 6.5rem;
		min-height: 5.8rem;
		max-height: 7.2rem;
		.allKai-t{
			padding-top: 0.3rem;
			padding-bottom: 0.3rem;
			text-align: center;
			position: sticky;
			top: 0;
			background-color: #fff;
		}
		.allKai-list{
			.item{
				.item-l{
					img{
						width: 0.8rem;
						height: 0.8rem;
						border-radius: 100%;
						margin-right: 0.2rem;
					}
				}
				.item-r{
					width: 1.2rem;
					height: 0.5rem;
					background-color: #50AD22;
					color: #fff;
					font-size: 0.24rem;
					border-radius: 0.25rem;
				}
			}
		}
		
	}
	.otherTuan{
		background-color: #fff;
		.item{
			padding: 0.3rem 0.2rem;
			.item-l{
				.img{
					width: 0.8rem;
					height: 0.8rem;
					border-radius: 100%;
					margin-right: 0.2rem;
				}
				span{
					font-size: 0.3rem;
					color: #333;
				}
			}
			.item-r{
				.item-r-l{
					margin-right: 0.1rem;
					p:first-child{
						font-size: 0.26rem;
						color: #333;
					}
					p:last-child{
						font-size: 0.24rem;
						color: #666;
					}
				}
				.item-r-r{
					width: 1.5rem;
					height: 0.6rem;
					background-color: #50AD22;
					border-radius: 0.3rem;
					color: #fff;
				}
			}
		}
	}
    .to_ico{
        width: 0.12rem;
        height: 0.22rem;
        margin: auto 0;
    }
    // 返回首页
    .back_home{
        width: 0.62rem;
        height: 0.62rem;
        position: fixed;
        z-index: 100;
        top: 1.24rem;
        right: 0.3rem;
        border-radius: 100%;
        background-color: rgba(0, 0, 0, 0.4);
        img{
            width: 0.44rem;
            height: 0.44rem;
            margin: auto;
        }
    }
    // 轮播图
    .swipe_box{
        width: 100%;
        max-width: 750px;
        margin: 0 auto;
        height: 7.5rem;
        position: relative;
        .swiper_item{
            height: 7.5rem;
            img{
                width: 100%;
                height: 100%;
            }
        }
        .swipe_index{
            width: 0.8rem;
            height: 0.4rem;
            position: absolute;
            z-index: 1;
            bottom: 0.3rem;
            right: 0.3rem;
            border-radius: 0.2rem;
            font-size: 0.22rem;
            line-height: 0.4rem;
            background-color: rgba(0,0,0,0.4);
        }
    }
    // 商品信息
    .goods_infos{
        padding:0 0.3rem 0.3rem;
        background-color: #fff;
		
        .top{
            margin-top: 0.3rem;
            .title{
                font-size: .34rem;
                line-height: 150%;
                color: #333;
            }
            .share_btn{
                width: 0.4rem;
                height: 0.4rem;
                margin: 0 0 auto 0.3rem;
            }
        }
        .prices{
            margin-top: 0.3rem;
            span{
                font-size: 0.52rem;
                line-height: 120%;
                color: #FF4400;
            }
            .sales{
                font-size: 0.2rem;
                line-height: 120%;
                color: #999;
            }
            .seckill_old{
                margin-left: 0.1rem;
                font-size: 0.22rem;
                line-height: 120%;
                color: #999;
                b{
                    font-weight: normal;
                    text-decoration: line-through;
                }
            }
        }
    }
    // 其他服务
    .others{
        height: 0.8rem;
        padding: 0 0.3rem;
        border-bottom: 0.01rem solid #ededed;
        font-size: 0.26rem;
        line-height: 0.8rem;
        color: #333;
        background-color: #fff;
        .text{
            margin-left: 0.3rem;
            font-size: 0.24rem;
            color: #666;
        }
    }
    // 商品评价
    .evaluates{
        padding: 0 0.3rem;
        background-color: #fff;
        .evaluate_head{
            height: 0.8rem;
            border-bottom: 0.01rem solid #ededed;
            font-size: 0.36rem;
            font-weight: bold;
            line-height: 0.8rem;
            color: #212121;
            .right{
                font-size: 0.2rem;
                color: #666;
                span{
                    padding-right: 0.24rem;
                    background: url('~@/assets/c_rightarrow.png') no-repeat right center;
                    background-size: 0.12rem 0.22rem;
                }
            }
        }
        // 评价
        .evaluate{
            padding: 0.2rem 0;
            .top{
                .user_img{
                    width: 0.5rem;
                    height: 0.5rem;
                    margin: 0 0 auto;
                    border-radius: 100%;
                    overflow: hidden;
                }
                .rights{
                    margin-left: 0.2rem;
                    .user_name{
                        font-size: 0.26rem;
                        line-height: 120%;
                        color: #333;
                    }
                    .spec{
                        margin-top: 0.1rem;
                        font-size: 0.2rem;
                        line-height: 120%;
                        color: #b2b2b2;
                    }
                    .star_box{
                        margin-left: 0.2rem;
                        img{
                            width: 0.2rem;
                            height: 0.2rem;
                            margin: 0 0.02rem;
                        }
                    }
                }
            }
            .evaluate_text{
                margin-left: 0.56rem;
                font-size: 0.24rem;
                line-height: 150%;
                color: #333;
            }
            .evaluate_imgs{
                margin-left: 0.56rem;
                .img{
                    width: 2rem;
                    height: 2rem;
                    margin: 0.16rem 0.14rem 0 0;
                    border-radius: 0.1rem;
                }
                .img:nth-child(3n){
                    margin-right: 0;
                }
            }
        }
    }
    // 商品详情
    .articles{
        .heads{
            font-size: 0.26rem;
            line-height: 0.8rem;
            color: #333;
            height: 0.8rem;
            position: relative;
        }
        .heads::before,.heads::after{
            content: "";
            width: 0.78rem;
            height: 0.02rem;
            margin: auto 0;
            position: absolute;
            z-index: 1;
            top: 0;
            bottom: 0;
            background-color: #dedede;
        }
        .heads::before{
            left: 30%;
        }
        .heads::after{
            left: 60%;
        }
        .article{
            padding: 0.2rem;
            background-color: #fff;
            img{
                width: 100%;
                height: 100%;
            }
        }
    }
    // 底部栏
    .footer_box{
        width: 100%;
        height: 1rem;
        .foot_items{
            width: 100%;
            max-width: 750px;
            height: 1rem;
            margin: 0 auto;
            padding-right: 0.28rem;
            position: fixed;
            z-index: 100;
            bottom: 0;
            left: 0;
            right: 0;
            background-color: #fff;
            box-shadow:0px -1px 10px 0px rgba(188,184,184,0.49);
            .item{
                position: relative;
                img{
                    max-width: 0.4rem;
                    max-height: 0.38rem;
                    margin: 0.14rem auto 0;
                }
                p{
                    margin-top: 0.1rem;
                    font-size: 0.22rem;
                    line-height: 120%;
                    color: #666;
                }
                .point{
                    width: 0.3rem;
                    height: 0.3rem;
                    position: absolute;
                    z-index: 10;
                    top: 00;
                    right: 0.22rem;
                    border-radius: 100%;
                    font-size: 0.2rem;
                    line-height: 0.3rem;
                    background-color: #53AB2A;
                }
            }
            .right_btn{
                width: 3.8rem;
                height: 0.7rem;
                margin: auto 0 auto 0.2rem;
                border-radius: 0.36rem;
                overflow: hidden;
                font-size: 0.28rem;
                line-height: 0.7rem;
                .add_cart{
                    background-color: #F28D17;
                }
                .buy_now{
                    background-color: #53AB2A;
                }
            }
        }
    }
    // 分享弹窗
    .share_popup{
        width: 100%;
        height: 2.54rem;
        border-radius: 0.16rem 0.16rem 0 0;
        overflow: hidden;
        .share_box{
            width: 100%;
            background-color: #fff;
            .share_item{
                img{
                    width: 1.1rem;
                    height: 1.1rem;
                    margin: 0 auto;
                    border-radius: 100%;
                }
                p{
                    margin-top: 0.3rem;
                    font-size: 0.3rem;
                    line-height: 120%;
                    color: #999;
                }
            }
        }
    }
    // 规格弹窗
    .c_popup{
        max-height: 10.18rem;
        border-radius: 0.14rem 0.14rem 0 0;
        background-color: #fff;
        .c_box{
            width: 100%;
            overflow-y: scroll;
            .top{
                height: 1.16rem;
                font-size: 0.36rem;
                line-height: 1.16rem;
                font-weight: bold;
                color: #333;
                position: relative;
                .cancel{
                    width: 0.42rem;
                    height: 0.42rem;
                    margin: auto 0;
                    position: absolute;
                    z-index: 1;
                    top: 0;
                    right: 0.3rem;
                    bottom: 0;
                    background-color: #fff;
                }
            }
            // 规格弹窗
            .goods_info{
                padding: 0.3rem;
                border-bottom: 0.01rem solid #ededed;
                .goods_img{
                    width: 1.6rem;
                    height: 1.6rem;
                    border-radius: 0.1rem;
                }
                .infos{
                    margin-left: 0.3rem;
                    .title{
                        font-size: 0.26rem;
                        line-height: 120%;
                        color: #333;
                    }
                    .price{
                        font-size: 0.32rem;
                        line-height: 120%;
                        color: #ff4400;
                    }
                    .stock{
                        font-size: 0.24rem;
                        line-height: 120%;
                        color: #333;
                    }
                }
                .cancel{
                    width: 0.42rem;
                    height: 0.42rem;
                    margin-left: 0.2rem;
                }
            }
            // 参数列表
            .param_lists{
                overflow-y: auto;
                border-top: 0.01rem solid #ededed;
                .parama{
                    width: 100%;
                    height: 0.9rem;
                    padding: 0 0.3rem;
                    border-bottom: 0.01rem solid #ededed;
                    font-size: 0.26rem;
                    line-height: 0.9rem;
                    color: #333;
                    p{
                        width: 1.8rem;
                    }
                    .notes{
                        margin-left: 0.12rem;
                        color: #666;
                    }
                }
            }
            .close_btn{
                margin-top: 0.2rem;
                .btn{
                    width: 100%;
                    height: 0.98rem;
                    margin: auto 0;
                    font-size: 0.32rem;
                    line-height: 0.98rem;
                    background-color: #53AB2A;
                }
            }
            // 规格
            .speces{
                padding: 0.3rem;
                border-bottom: 0.01rem solid #ededed;
                .spec_title{
                    font-size: 0.26rem;
                    line-height: 120%;
                    color: #333;
                }
                .sepc_lists{
                    .spec{
                        height: 0.4rem;
                        margin: 0.3rem 0.3rem 0 0;
                        padding: 0 0.2rem;
                        border: 0.01rem solid #c0c0c0;
                        border-radius: 0.1rem;
                        font-size: 0.24rem;
                        line-height: 0.38rem;
                        color: #666;
                    }
                    .spec.on{
                        border-color: #FEA382;
                        color: #FEA382;
                    }
                }
            }

            // 购买数量
            .buy_nums{
                padding: 0.3rem;
                font-size: 0.26rem;
                line-height: 120%;
                color: #333;
                border-bottom: 0.01rem solid #ededed;
                .nums_box{
                    width: 2.04rem;
                    height: 0.5rem;
                    border: 0.01rem solid #dadada;
                    border-radius: 0.1rem;
                    .cut,.add{
                        width: 0.6rem;
                        font-size: 0.4rem;
                        line-height: 0.48rem;
                        color: #bebebe;
                    }
                    .num{
                        border-left: 0.01rem solid #dadada;
                        border-right: 0.01rem solid #dadada;
                        font-size: 0.3rem;
                        line-height: 0.48rem;
                        color: #333;
                    }
                }
            }

            // 确定按钮
            .buy_btn{
                height: 0.98rem;
                margin-top: 0.12rem;
                font-size: 0.3rem;
                line-height: 0.98rem;
                background-color: #53AB2A;
            }
        }
    }
    // 微信分享提示
    .finally_share_box{
        width: 100%;
        background-color: rgba(0, 0, 0, 0.2);
        .finally_share{
            width: 100%;
            max-width: 750px;
            height: 100vh;
            margin: 0 auto;
            .img_box{
                width: 5.64rem;
                height: 3.9rem;
                margin: 0 0.4rem 0 auto;
            }
            .white{
                width: 1.58rem;
                height: 0.6rem;
                margin: 0.36rem auto 0;
                border-radius: 0.1rem;
                font-size: 0.28rem;
                line-height: 0.6rem;
                background-color: #ff5000;
            }
        }
    }
    /* 分享海报 */
    .shareBox {
        width: 6.4rem;
        max-height: 11rem;
        margin: auto;
        z-index: 1000;
        img {
            width: 6.8rem;
            height: 100%;
        }
        /deep/ .van-swipe__indicator--active {
            background: #ff5800;
        }
        /deep/ .van-popup {
            position: fixed;
            background-color: rgba(0,0,0,0.06);
            top: 0;
            left: 50%;
            bottom: 0;
            transform: translate3d(-50%,0,0);
            transition: .2s ease-out;
        }
    }
    .canvas_share {
        width: 5.6rem;
        max-height: 9.64rem;
        padding: 0.5rem 0.3rem;
        // margin: auto;
        position: fixed;
        z-index: 1;
        left: -500%;
        bottom: -500%;
        overflow: hidden;
        background-color: #56A934;
        .share_banner{
            width: 5rem;
            height: 6rem;
            padding: 0.2rem;
            border-radius: 0.1rem;
            overflow: hidden;
            background-color: #fff;
            img{
                width: 4.6rem;
                height: 4.6rem;
            }
            p{
                margin-top: auto;
                font-size: 0.2rem;
                line-height: 150%;
                color: #333;
            }
        }
        .share-logo-top{
            width: 1.2rem;
            height: 1.2rem;
            position: absolute;
            z-index: 1;
            top: 0.2rem;
            left: 0.2rem;
            background-color: #fff;
            border-radius: 100%;
            overflow: hidden;
        }
        .share_code {
            margin-top: 0.3rem;
            padding: 0.3rem 0.2rem;
            border-radius: 0.1rem;
            background-color: #fff;
            overflow: hidden;
            .share_left{
                .share_left_top{
                    .share_user{
                        width: 0.8rem;
                        height: 0.8rem;
                        border-radius: 100%;
                        overflow: hidden;
                    }
                    .name{
                        margin-left: 0.2rem;
                        font-size: 0.26rem;
                        line-height: 120%;
                        color: #333;
                    }
                }
                .share_left_bottom{
                    .ico{
                        width: 1rem;
                        height: 0.4rem;
                        font-size: 0.2rem;
                        line-height: 0.4rem;
                        background: url('~@/assets/arrow_bg.png') no-repeat center;
                        background-size: 100% 100%;
                    }
                    .price{
                        margin-left: 0.14rem;
                        font-size: 0.38rem;
                        line-height: 120%;
                        color: #EB2126;
                    }
                }
        		.logo-area{
        			.logo-img{
        				width: 0.3rem;
        				height: 0.3rem;
        				img{
        					width: 100%;
        					height: 100%;
        				}
        			}
        			.logo-name{
        				font-size: .2rem;
        				margin-left: .1rem;
        			}
        		}
            }
            .share_right{
        		width: 1.8rem;
                .code{
                    width: 1.6rem;
                    height: 1.6rem;
                    margin: 0 auto;
                }
                .note{
                    height: 0.32rem;
                    margin: 0.12rem auto 0;
                    padding: 0 0.1rem;
                    font-size: 0.2rem;
                    line-height: 0.32rem;
                    border-radius: 0.18rem;
                    background-color: #56A934;
                }
            }
        }
    }
	.guize{
		width: 6.5rem;
		padding: 0.3rem;
		height: 7.2rem;
		.guize-title{
			text-align: center;
			padding: 0.1rem 0 0.3rem 0;
			font-size: 0.32rem;
			color: #000;
			border-bottom: 0.01rem solid #e0e0e0;
			margin-bottom: 0.3rem;
		}
	}
}
</style>